<!DOCTYPE html>
<html>
<head>
    <title>攻略系列</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
<script>
    $(function () {
        //获取参数,先导入common.js
        //大家都在看
        var params = getParams();
        console.log(params.id);
        $.get("/strategies/"+params.strategyId+"/travel",function (data) {
            $("#strategies").renderValues(data)
            $("#eveWatching").renderValues({list:data.travels},{
                setHref:function (item,value) {
                    $(item).attr("href",$(item).attr("href")+value)
                }
            })

        })
        //定义一个空值的变量来准备接受
        var html="";
        //概况等攻略分类
        var index=1;
        $.get("/strategies/"+params.strategyId+"/catalogs",function (data) {
            console.log(data);
            //渲染到页面
            $(".catalogs").renderValues({self:data},{
                    getName:function(item,value) {
                        if(index<10){
                        $(item).html("0"+index++ +"/"+value);
                    }else{
                        $(item).html(index++ +"/"+value);
                    }
                }

            });
            //绑定点击事件
            $(".catalogs [data-href]").click(function () {
                var url = $(this).data("href");
                var id = $(this).data("id");
                //获取id值,如果这个不是a标签,就寻找里面的a标签里面的属性获取
                if(!url){
                    var a = $(this).find('a');
                    url = a.data("href");
                    id = a.data("id");
                }
                window.location.href = url + "?id=" + id;
            });
        })


            $.get("/strategyComments/"+params.strategyId+"/tag",function (data) {
                console.log(data);
                //用jrender渲染
                $("#comment").renderValues({list:data},{
                    setHref:function (item,value) {
                        $(item).attr("href",$(item).attr("href")+value)
                    }
                })
                $(".tag").renderValues({list:data})

                var stars=$(".comment-star")
                for (i=0;i<stars.length;i++){
                    //遍历,把第i个取出,imgurl已经是选择了的,这样吧document对象转换成Jquery对象
                    var temp=$(stars[i])
                    //拆分图片,变成一个数组
                    var star =temp.html();
                    //清空临时变量
                    temp.empty();
                    for (j=0;j<star;j++){
                        temp.append("<i class='"+"fa fa-star"+"'></i>");
                    };

                };
                var tags=$(".tags");
                var tempList=[];
                //裸游标签去重
                $.each(tags,function (index,ele) {
                    //定义一个数接收返回值
                   var temp= $.inArray($(ele).html(),tempList)
                    if (temp == -1) {
                        tempList.push($(ele).html())
                    }else {
                        $(ele).remove()
                    }

                })

            })
            $("#pills-comment-tab").click(function () {
                //图片展示
                var imgUrls=$(".imgUrls")
                //有多少个imgUrl,把他们遍历,然后再拆分
                for (i=0;i<imgUrls.length;i++){
                    //遍历,把第i个取出,imgurl已经是选择了的,这样吧document对象转换成Jquery对象
                    var temp=$(imgUrls[i])
                    //拆分图片,变成一个数组
                    var imgs =temp.html().split(";");
                    //清空临时变量
                    temp.empty();
                    for (j=0;j<imgs.length-1;j++){
                        temp.append("<li><img src='"+imgs[j]+"' width='50px' style='margin-right:5px'/></li>");
                    };

                };
            })


        //想去按钮
        $(".wishBtn").click(function () {
            var state = $(this).data("state");
            $.post("/strategies/"+params.strategyId+"/wish",{state:state},function (data) {
                console.log(data);
            })
        })


    })


    </script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="/strategyPage.html" onclick="self.location=document.referrer;">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="搜索旅行攻略">
            </div>
        </div>
    </div>
</div>

<div class="container strategies" id="strategies">
    <h5 class="title" render-html="title"></h5>
    <img render-src="coverUrl" width="100%">
    <small><span>58</span>人阅读过此攻略</small>
    <div class="focus">
        <i class="fa fa-heart"><span> 11</span> 收藏</i>
        <i class="fa fa-thumbs-up"><span> 22</span> 点赞</i>
        <button class="btn wishBtn" data-state="1">想去</button>
        <button class="btn wishBtn" data-state="2">去过</button>
    </div>
</div>
<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab">
    <li class="nav-item ">
        <a class="nav-link active" id="pills-catalog-tab" data-toggle="pill" href="#pills-catalog">
            <span>攻略目录</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " id="pills-comment-tab" data-toggle="pill" href="#pills-comment">
            <span>骡友点评</span>
        </a>
    </li>
</ul>
<div class="tab-content " id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-catalog">
        <div class="container hot" id="eveWatching">
            <h6>大家都在看</h6>
            <div render-loop="list">
                <a href="travelContent.html?id=" render-fun="setHref" render-key="list.id">
                    <button class="btn" render-html="list.title"></button>
                </a>
            </div>
        </div>
        <div class="catalogs">
            <div render-loop="self">
                <div class="container detail">
                    <h6 render-fun="getName" render-key="self.name"></h6>
                    <div render-loop="self.strategyDetail">
                        <a data-href="strategyDetail.html" render-attr="data-id=self.strategyDetail.id">
                            <button class="btn" render-html="self.strategyDetail.title"></button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--点评............................................................-->
    <div class="tab-pane fade " id="pills-comment">

        <div class="container tag">
            <h6>骡友标签</h6>
            <div render-loop="list">
                <h6 render-loop="list.tag">
                    <span class="tags" render-html="list.tag.name"></span>
                </h6>
            </div>
        </div>
        <hr>

        <div id="comment">
            <div render-loop="list">
                <div class="container row comment">
                    <div class="col-2 comment-head">
                        <a href="userProfiles.html?id=" render-fun="setHref" render-key="list.user.id">
                            <img class="rounded-circle"
                                 render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="col comment-right">
                        <p class="authorName"><span render-html="list.user.nickName"></span></p>
                        <span class="comment-star" render-html="list.starNum">
                               </span>
                        <span class="comment-date" render-html="list.commendTime"></span>
                        <div class="comment-content">
                            <a href="strategyComment.html">
                                <p render-html="list.content"></p>
                            </a>
                        </div>

                        <ul class="comment-img imgUrls" render-html="list.imgUrls">
                        </ul>

                        <div class="d-flex icon">
                            <a href="strategyComment.html?id=" render-fun="setHref" render-key="list.id">
                                <i class="fa  fa-commenting-o " style="margin-right: 10px"> 评论 </i>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</div>

<div class="operation">
    <button class="btn">加入旅行单</button>
    <button class="btn" id="commentBtn">点评</button>
</div>
<script>
    var user = sessionStorage.getItem("user");
    $("#commentBtn").click(function () {
        if(user){
            location.href="/mine/strategyaddComment.html?strategyId="+getParams().strategyId;
        }else {
            location.href="login.html"
        }
    });
</script>
</body>
</html>